<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <!-- 
        表单 form
        常见：
        input  type       radio file password text checkbox url data number week month color tel submit reset email time 
        textarea
        select
        option

        收集数据  ----提交给服务器---存到数据库当中

        v-model

        初始值

        各种表单元素对应初始值应该是什么？
        input text textarea 初始值 ''
        input  radio '' 可以是布尔值

     -->
    <div class="box">
        <label for="inp">用户名：</label>
        <!-- 用户名： -->
        <input id="inp" type="text" v-model="msgText"><br>
        <p>{{sex}}</p>
        性别
        <input type="radio" name="sex" id="sex" value="男" v-model="sex">
        <label for="sex">男</label>
        <input type="radio" name="sex" id="sex1" value="女" v-model="sex">
        <label for="sex1">女</label><br>
        <!-- 多选框checkbox -->
        <!-- checkbox默认的选中值为true 选不中 false  -->
        <input type="checkbox" name="" id="box1" v-model="checkboxValue" true-value="美女" false-value="渣男">
        <label for="box1">美女</label><br>
        <p>{{checkboxValue}}</p><br><br>

        <input type="checkbox" name="hanhan" id="football" value="足球" v-model="checkboxArr"><label for="football">足球</label>   
        <input type="checkbox" name="hanhan" id="lanqiu" value="篮球" v-model="checkboxArr"><label for="lanqiu">篮球</label> 
        <input type="checkbox" name="hanhan" id="pingpang" value="乒乓球" v-model="checkboxArr"><label for="pingpang">乒乓球</label> <br>
        <p>{{checkboxArr}}</p><br>
        <select name="" id="" v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="张继科">张继科</option>
            <option value="吴亦凡">吴亦凡</option>
            <option value="李易峰">李易峰</option>
        </select><br>
        <p>{{selected}}</p><br>

        <!-- 下拉列多选 需要配置属性 multiple 需要配置属性multiple 同时按住ctrl  -->
        <select name="" multiple id="" v-model="selectedarr">
            <option value="" disabled>请选择</option>
            <option value="张继科">张继科</option>
            <option value="吴亦凡">吴亦凡</option>
            <option value="李易峰">李易峰</option>
        </select><br>
        <p>{{selectedarr}}</p><br>

        <button @click="collectionData">提交</button>

    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                msgText:'雷浩杰',
                sex:'男',//
                checkboxValue:'',//不做任何更改时它的为布尔值，true-value false-value 
                checkboxArr:[],
                selected:'',
                selectedarr:[]
            },
            methods: {
                collectionData(){
                    console.log(this.msgText);
                    console.log(this.sex);
                }
            },
        })
    </script>
</body>
</html>